<!DOCTYPE html>
<html>
<head>
    <title>热量摄入计算器</title>
    <link rel="stylesheet" href="../static/css/minghu.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
</head>
<body>
    {% include 'show_ins_info.html' %}
    <div id="allPlanContents">
        <h1>热量摄入计算器</h1>
        <hr>  
        <div id="bodyMsrData" >
            <div class="form-row" ><h4 style="width:80px;">性别 </h4> <select id='sex' onchange="showRes();bfrValid();"><option value='女'>女</option><option value='男'>男</option></select></div>
            <div class="form-row" ><h4 style="width:80px;">年龄 </h4> <input id='age' type="number" min="0" style="width:30px;margin-right:10px;" onchange="showRes();bfrValid();"> 岁</div>
            <!-- <div class="form-row" ><h4 style="width:80px;">身高</h4> <input id='ht' type="number" min="0" style="width:50px;margin-right:10px;" onchange="showRes();bfrValid();"> cm</div> -->
            <div class="form-row" ><h4 style="width:80px;">体重</h4> <input id='wt' type="number" min="0" style="width:50px;margin-right:10px;" onchange="showRes();bfrValid();"> Kg</div>
            <div class="form-row" ><h4 style="width:80px;">腰围</h4> <input id='waist' type="number" min="0" style="width:50px;margin-right:10px;" onchange="showRes();bfrValid();" oninput="inputValid(this.id);"> cm</div>            
            <div class="form-row" ><h4 style="width:80px;">体脂率 </h4> <input id='bfr' type="number" min="0" step="0.01" style="width:50px;margin-right:10px;" onchange="showRes();" oninput="inputValid(this.id);"> %</div>
            <div style="margin-left:10px;margin-bottom: 4px;margin-top: 4px;"><h4 style="width:80px;margin-top:2px;margin-bottom: 2px;">活动情况</h4> <select id='active' type="number" onchange="showRes();" style="margin-top:2px;"></select></div>
            <div class="form-row" style="margin-top:10px;" ><h4 style="width:80px;">热量缺口</h4>  <select id='caloryLack' type="number" onchange="showRes();" ><option value='500'>500</option><option value='800'>800</option></select>&nbsp;&nbsp;Kcal</div>
        </div>  

        <hr>

        <div id="res" style="margin-top:30px;">
            <div id="resTitle" style="display: none;"><h4>计算结果</h4></div>
            <div id="bmr"></div>
            <div id="tdee"></div>
            <div id="dateTakenCal"></div>
        </div>
       

        
    </div>


    <script src="../static/js/common.js"></script>
    <script>     
        let paraData;
        document.addEventListener("DOMContentLoaded",function(){
            // loginCheck();
            const insInfo=hideInsSelectBlockAndGetInsInfo();
            insName=insInfo['sessionInsName'];
            insId=insInfo['sessionInsId'];
            insRole=insInfo['sessionInsRole'];


            fetch('/deal_calculate_calory', )
                .then(response => response.json())
                .then(data => {
            //将data赋值给块变量cus_list，供后面的handleInput使用
                paraData=data['data']
                console.log('parameters:',data['data']);
                showActive(data['data'])
                })
                .catch(error => console.error('Error:', error));
                
        });

        function showActive(data){
            const activeSel=document.getElementById('active');
            Object.keys(data).forEach(item=>{
                const opt=document.createElement('option');
                opt.value=data[item];
                opt.text=item;
                activeSel.appendChild(opt);
            });
        }

        function calBfr(){
            const waist=parseFloat(document.getElementById('waist').value);
            const wt=parseFloat(document.getElementById('wt').value);
            const bfr=parseFloat(document.getElementById('bfr').value);
            const sex=document.getElementById('sex').value;
            const age=parseFloat(document.getElementById('age').value);
            let k;
            if(sex==='女'){
                k=34.89
            }else if(sex==='男'){
                k=44.74
            }   
            const a=waist*0.74
            const b=wt*0.082+k
            const fat=a-b
            const bfrRes=fat/wt
            
            return bfrRes
        }

        function inputValid(id){
            if(id==='waist'){
                if(document.getElementById(id).value!==''){
                    document.getElementById('bfr').disabled=true;
                }else{
                    document.getElementById('bfr').disabled=false;
                    document.getElementById('bfr').value='';
                }
            }

            if(id==='bfr'){
                if(document.getElementById(id).value!==''){
                    document.getElementById('waist').disabled=true;
                }else{
                    document.getElementById('waist').disabled=false;
                    document.getElementById('waist').value='';
                }
            }
        }

        function bfrValid(){
            const waist=parseFloat(document.getElementById('waist').value);  
            const wt=parseFloat(document.getElementById('wt').value);
            const bfr=parseFloat(document.getElementById('bfr').value);
            const sex=document.getElementById('sex').value;
            const age=parseFloat(document.getElementById('age').value);
            //bfr = bfr_test.bfr(age=age, sex=sex, ht=ht, wt=wt, waist=waist, adj_bfr='no', adj_src='prg', formula=1)

            let calBfrRes;
            if(waist){
                if(waist!==''){
                    calBfrRes=calBfr();
                    document.getElementById('bfr').value=(calBfrRes*100).toFixed(2);       
                }else{
                    calBfrRes=0
                    document.getElementById('bfr').value='';       
                }
            }
   

        }

        function showRes(){

            // bmr=13.587*瘦体重+9.613*脂肪量+198*性别参数-3.351*年龄+674
            // 脂肪量=体脂率*体重
            // TDEE（每日消耗总热量）=bmr*活动系数
            // 每日减脂摄入热量=TDEE-热量缺口

            const wt=parseFloat(document.getElementById('wt').value);
            const sex=document.getElementById('sex').value;
            const age=parseFloat(document.getElementById('age').value);
            const bfr=parseFloat(document.getElementById('bfr').value)/100;
            const active=document.getElementById('active').value;
            const calLack=parseFloat(document.getElementById('caloryLack').value);
            // const ht=parseFloat(document.getElementById('ht').value);
            const waist=parseFloat(document.getElementById('waist').value);

            const bmrBox=document.getElementById('bmr');
            const tdeeBox=document.getElementById('tdee');
            const dtcBox=document.getElementById('dateTakenCal');
            const resTitle=document.getElementById('resTitle');

            bmrBox.innerHTML='';
            tdeeBox.innerHTML='';
            dtcBox.innerHTML='';
            resTitle.style.display='none';
            

            if(wt && wt!=='' && sex && sex!=='' && age && age!=='' && bfr && bfr!=='' && active && active!=='' && calLack && calLack!==''){
                const fat=bfr*wt;
                const thinWt=wt-fat;
                const sexP=sex==='男'?1:0;
                const bmr=13.587*thinWt+9.613*fat+198*sexP-3.351*age+674;
                const activeP=parseFloat([active]);
                const tdee=bmr*activeP;
                const dtc=tdee-calLack;

                resTitle.style.display='block';
                bmrBox.innerHTML=`<div class="form-row"><h4 style='width:230px;color:#57d457;'>基础代谢率（BMR）</h4><span style="color:#57d457;font-weight:bold;">${bmr.toFixed(2)}&nbsp;&nbsp;Kcal</span><div>`;
                tdeeBox.innerHTML=`<div class="form-row"><h4 style='width:230px;color:#b34ae0;'>每日消耗总热量（TDEE）</h4><span style="color:#b34ae0;font-weight:bold;">${tdee.toFixed(2)}&nbsp;&nbsp;Kcal</span><div>`;
                dtcBox.innerHTML=`<div class="form-row"><h4 style='width:230px;color:#e37242;'>每日减脂摄入热量</h4><span style="color:#e37242;font-weight:bold;">${dtc.toFixed(2)}&nbsp;&nbsp;Kcal</span><div>`;

            }else{
                resTitle.style.display='none';
                bmrBox.innerHTML='';
                tdeeBox.innerHTML='';
                dtcBox.innerHTML='';

                if(wt && wt!=='' && sex && sex!=='' && age && age!=='' && waist && waist!==''&& active && active!=='' && calLack && calLack!==''){
                    const calBfrRes=calBfr();
                    const fat=calBfrRes*wt;
                    const thinWt=wt-fat;
                    const sexP=sex==='男'?1:0;
                    const bmr=13.587*thinWt+9.613*fat+198*sexP-3.351*age+674;
                    const activeP=parseFloat([active]);
                    const tdee=bmr*activeP;
                    const dtc=tdee-calLack;

                    resTitle.style.display='block';
                    bmrBox.innerHTML=`<div class="form-row"><h4 style='width:230px;color:#57d457;'>基础代谢率（BMR）</h4><span style="color:#57d457;font-weight:bold;">${bmr.toFixed(2)}&nbsp;&nbsp;Kcal</span><div>`;
                    tdeeBox.innerHTML=`<div class="form-row"><h4 style='width:230px;color:#b34ae0;'>每日消耗总热量（TDEE）</h4><span style="color:#b34ae0;font-weight:bold;">${tdee.toFixed(2)}&nbsp;&nbsp;Kcal</span><div>`;
                    dtcBox.innerHTML=`<div class="form-row"><h4 style='width:230px;color:#e37242;'>每日减脂摄入热量</h4><span style="color:#e37242;font-weight:bold;">${dtc.toFixed(2)}&nbsp;&nbsp;Kcal</span><div>`;

                }else{
                    resTitle.style.display='none';
                    bmrBox.innerHTML='';
                    tdeeBox.innerHTML='';
                    dtcBox.innerHTML='';
                }
            }

            









        }

       
    </script>
</body>